<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-date"></i> 角色管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限分配</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-form :model="form" :rules="rules" ref="role_form" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" type="input"  disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="des">
          <el-input  v-model="form.des" type="input" disabled="disabled"></el-input>
        </el-form-item>
       <el-form-item label="适用对象" prop="des">
           <el-button type="primary" @click="opensud">查看</el-button>
       </el-form-item>
      <el-form-item label="菜单选择" prop="des">
             <el-tree :data="dataMenu"
              ref="tree"
              node-key="id"  
               show-checkbox
               highlight-current
              :props="defaultMenuProps"
              ></el-tree>
       </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="submit('form')">确认修改</el-button>

        </el-form-item>
      </el-form>



    </div>

    
    <!-- 查看成员 -->
     <el-dialog title="分配人员" :visible.sync="sudVisible" width="60%">

      <div class="tree-left">
        <el-tree :data="dataTree"
          node-key="index"  
          :default-checked-keys="[1]" 
          :props="defaultProps"
          
          @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="tree-right"> 

        <el-tree
            ref="userTree"
            :data="dataUser"
            show-checkbox
            node-key="id"
            :props="defaultUserProps">
          </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="sudVisible = false">取 消</el-button>
                <el-button type="primary" @click="sudVisible = false">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import { quillEditor } from 'vue-quill-editor';
  export default {
    data: function(){
      return {
        form: {
          id:'',
          code: '',
          name:'',
         
        },
        checkmenuList:[],
        checkUserList:[],
        rules: {
          des: [
            { required: false, message: '请输入角色描述', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ]
        },
        sudVisible:false,
        dataTree: [],
        defaultProps: {
          children: 'deptList',
          label: 'name'
        },
        dataUser:[],
        defaultUserProps: {
          children: 'deptList',
          label: 'name'
        },
        dataMenu:[],
        defaultMenuProps: {
          children: 'child',
          label: 'name'
        },
      }
    },
    components: {
      quillEditor
    },
    computed:{

    },
    mounted :function(){
      this.isCover();
    },
    methods: {
    
      onEditorChange({editor, html, text}) {
        this.content = html;
      },
      submit(formName) {
        this.add()
        //this.$message.success('提交成功！');
      },
  
      /**
       * 覆盖原来的数据，重新加载
       */
      isCover(){
       
        this.form = JSON.parse(sessionStorage.getItem("role_form"));
        /**
         * 查询本角色已经存在的人
         */
        this.getUserByRoleId(this.form.id)
        this.selectAllMenu(this.form.id)
        // console.log(this.form);
      },
      add() {
        /**
         * 获取选中的用户
         */
        this.checkmenuList = this.$refs.tree.getCheckedNodes();
        this.checkUserList = [];
        if(this.$refs.userTree != null && this.$refs.userTree != undefined){
            this.checkUserList = this.$refs.userTree.getCheckedNodes()
        }
        var menuIds ="";
        for(var i in this.checkmenuList){
          if(menuIds.length > 0 ){
            menuIds +=",";
          }
          menuIds +="'"+this.checkmenuList[i].id+"'"
        }

        var userIds ="";
        for(var i in this.checkUserList){
          if(userIds.length > 0 ){
            userIds +=",";
          }
          userIds +="'"+this.checkUserList[i].id+"'"
        }

        this.form.menuIds = menuIds;
        this.form.userIds = userIds;
     
        this.form.roleId = this.form.id;


        let that = this
        //发送请求
        this.HttpUtil.encryptPost(
          this,
          this.Global.URLPATH.ROLE_SET_POWER,
          this.form,
          function (data) {
          
            that.$message.success("修改成功");
            sessionStorage.setItem("remove_this","/role/update");
            that.$router.push({path: '/role/index'})
            that.form =  {
              code: '',
              name:'',
            }
          },
          function (data) {//访问失败
            that.$message.success(data.msg);
          });
      },
      /**
       * 根据角色id查询所拥有的用户
       */
      getUserByRoleId(roleId){
        var that = this;
        this.HttpUtil.encryptGet(
          this,
          this.Global.URLPATH.ROLE_SELECT_USER_BY_ROLEID,
          {
            roleId:roleId
          },
          function (data) {
            that.checkUser = data.data;
            
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      },
        /**
       * 根据角色id查询所拥有的用户
       */
      selectAllMenu(roleId){
        var that = this;
        this.HttpUtil.encryptGet(
          this,
          this.Global.URLPATH.MENU_QUERY_ALL,
          {
            roleId:roleId
          },
          function (data) {
          
              if(data.data != null && data.data != undefined && data.data.menuList != undefined && data.data.menuList != null){
                for(var i in data.data.menuList){
                    data.data.menuList[i].index = parseInt(i)+1;
                }
                that.dataMenu = data.data.menuList;
            
                var temp = [];
                for(var i in data.data.existMenuIds){
                  var tp = that.getChildByKey(data.data.menuList,data.data.existMenuIds[i].id);
          
                  temp.push(tp.id);
                 
                }
              
                that.$refs.tree.setCheckedKeys(temp);
                 
              }
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      },
       /**
       * 
       */
      getChildByKey(list ,value){
       var res ;
        var that = this;
        for(var i in list){
          if(list[i].child != null && list[i].child != undefined && list[i].child.length != 0){
              res=this.getChildByKey(list[i].child,value);
             
          }
          if(res != undefined ){
            break;
          }
          if(list[i].id == value){
              res = list[i];
              break;
          }
        }
        return res;
      },
      getSId(roleId){
        var that = this;
        this.HttpUtil.encryptGet(
          this,
          this.Global.URLPATH.MENU_QUERY_ALL,
          {
            roleId:roleId
          },
          function (data) {
            that.checkUser = data.data;
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      },
      opensud(){
        this.sudVisible = true;
        this.getMechanism();
      },
      // 获取 easy-mock 的模拟数据
      getData(mechanismId,deptId) {
          
        var that = this;
        this.HttpUtil.encryptGet(
          this,
          this.Global.URLPATH.USER_QUERYALLNOPAGE,
          {
            token:sessionStorage.getItem("token"),
            deptId : deptId,
            mechanismId:mechanismId,
            pageNum:that.cur_page
          },
          function (data) { 
              if(data.data != null && data.data != undefined){
                  for(var i in data.data){
                      data.data[i].index = parseInt(i)+1;
                  }
                  that.dataUser = data.data;
                var temp = [];
                for(var i in that.checkUser){
                  var tp = that.checkUser[i].id;
                  temp.push(tp);
                }
                that.$refs.userTree.setCheckedKeys(temp);
              }
          },
          function (data) {//访问失败
            that.$message.error(data.msg);
          });
      },
      /**
       * 获取机构列表
       */
      getMechanism(){
        var that = this;
        
        this.HttpUtil.encryptGet(
          this,
          this.Global.URLPATH.MECHANISM_DEPT,
          {
            token:sessionStorage.getItem("token")
          },
          function (data) {
            if(data.data != null && data.data != undefined){
              for(var i in data.data){
                  data.data[i].index = parseInt(i)+1;
              }
              that.dataTree = data.data;
             
            }
            
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      },
        //树形控件点击
      handleNodeClick(data) {
        if(data.mechanismId == undefined){ //为机构
          this.form.mechanismId = data.id;
          this.form.deptId =null;
          this.getData(this.form.mechanismId,null);
        }else{//部门
        
          this.form.mechanismId = data.mechanismId;
          this.form.deptId = data.id
          this.form.deptName = data.deptName
          this.getData(this.form.mechanismId,this.form.deptId);

        }
      }
      
    },
    watch:{
      $route(newValue, oldValue){
        if(newValue.path == "/role/menuPower"){
          this.isCover();
        }
      }
    }
  }
</script>
<style scoped>
  .editor-btn{
    margin-top: 20px;
  }

  .tree-left{
  width:20%;
	height: 500px;
  float:left;
  }
  .tree-right{
  width:80%;
  height: 500px;
  float:left;
  }
</style>
